<template>
  <div>
    <search></search>
    <div class="listtttttttt">
      <!-- 文章列表组件 -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell v-for="hehe in list" :key="hehe.id" @click="living(hehe.id)">
          <template v-slot>
            <van-image fit="cover" :src="hehe.photo" />
            <div>
              <strong>{{ hehe.title }}</strong>
              <span class="fr">月售{{ hehe.saleroom }}</span>
            </div>
            <span>
              <van-icon name="fire-o" />
              限量爆款，多轴可选
            </span>
            <span class="fr cc">￥{{ hehe.price }}</span>
          </template>
        </van-cell>
      </van-list>
    </div>
  </div>
</template>

<script>
import { littlebro } from "./index.js";
import search from "../../search/index.vue";
export default {
  components: { search },
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
    };
  },
  methods: {
    async onLoad() {
      try {
        // 异步更新数据
        const { data } = await littlebro();
        // 由于每次加载都应该要添加在原有数组 所以要PUSH 当然 数据少当我没说
        // this.list.push(...data)
        this.list = data;
        // console.log(this.list)
        // if (data.length) {
        //   console.log('加载中？')
        // } else {
        //   this.finished = true
        // }
        // 加载状态结束
        this.loading = false;
      } catch (err) {
        console.log(err, "加载失败");
      }
    },
    living(id) {
      // console.log(id)
      this.$router.push({
        name: "details",
        params: {
          livingId: id,
        },
      });
    },
  },
};
</script>

<style scoped lang='less'>
.listtttttttt {
  margin: 50px 0;
}
.fr {
  float: right;
  padding-right: 20px;
  color: gray;
}
/deep/ .van-image {
  width: 100%;
  height: 150px !important;
}
.cc {
  color: red;
  font-size: 18px;
}
.van-icon-fire-o {
  color: red;
}
</style>
